<template>
	<div class="page">
		<div class="search-view c-panel">
			<CFilterSearchView
				:data="searchData"
				@on-search="getAccounts">
			</CFilterSearchView>
		</div>
		
		<div class="data-view c-panel">
			<div class="btns-view">
				<Button type="primary" 
					@click="click2Refresh" 
					:loading="data.isLoading"
					style="margin-right: 10px;">
					刷新账户
				</Button>
				<Button type="ghost" @click="click2New">
					新建账户
				</Button>
			</div>
			<CAccountListView 
				:data="data"
				@on-click="clickItem2ListView">
			</CAccountListView>
		</div>
		
		<div class="page-view">
			<Page :total="data.totalsize" 
				:current="searchData.page + 1" 
				:page-size="searchData.pagesize" 
				show-sizer 
				show-elevator
				show-total 
				placement="top"
				@on-change="changePage" 
				@on-page-size-change="changePageSize"></Page>
		</div>
		
		<!-- 作品类型编辑窗口 -->
		<CAccountEditModal
			:data="editData"
			@on-submit="submit2Edit">
		</CAccountEditModal>
	</div>
</template>

<script>
	//views
	import CFilterSearchView from '@/components/CFilterSearchView';
	import CAccountListView from '@/pages/account/view/CAccountListView';
	import CAccountEditModal from '@/pages/account/view/CAccountEditModal.vue';
	
	import AccountService from '@/services/AccountService.js';
	
	const $accountService = AccountService();
	export default {
		components: {
			CFilterSearchView, 
			CAccountListView, 
			CAccountEditModal
		},
		data() {
			return {
				searchData: {
					filter: 0,
					condition: '',
					page: 0,
					pagesize: 20,
					placeholder: '用户名/姓名/手机号',
					filters: [
						{
							value: 0,
							label: "全部"
						}, {
							value: 1,
							label: "超级管理员"
						}, {
							value: 2,
							label: "管理员"
						}, {
							value: 3,
							label: "审核员"
						}, {
							value: 4,
							label: "录入员"
						}
					]
				},
				data: {
					isLoading: false,
					data: [],
					totalsize: 0
				},
				editData: {
					isShow: false,
					isSubmit: false,
					row: null,
					data: {
						accid: null,
						username: '',
						phoneNum: '',
						name: '',
						roleType: 1
					}
				}
			}
		},
		
		methods: {
			click2Refresh() {
				this.getAccounts();
			},
			click2New() {
				var $this = this;
				$this.editData.isShow = true;
				$this.editData.isSubmit = false;
				$this.editData.actionType = 1;
				$this.editData.data = {
					accid: null,
					username: null,
					phoneNum: null,
					name: null,
					roleType: 1
				}
			},
			changePage: function(page) {
				this.searchData.page = page - 1;
				this.getAccounts();
			},
			changePageSize(pagesize) {
				this.searchData.page = 0;
				this.searchData.pagesize = pagesize;
				this.getAccounts();
			},
			clickItem2ListView(type, data) {
				var $this = this;
				if(type == 'edit') {
					$this.editData.isShow = true;
					$this.editData.isSubmit = false;
					$this.editData.actionType = 2;
					$this.editData.row = data;
					$this.editData.data = {
						accid: data.row.accid,
						username: data.row.username,
						phoneNum: data.row.phoneNum,
						name: data.row.name,
						roleType: data.row.roleType
					}
				} else if(type == 'enable' || type == 'disable') {//启用、禁用
					var $this = this;
					var status = data.status;
					var content = status == 1 ? '确定禁用该运营人员吗？' : '确定启用该运营人员吗？';
					this.$Modal.confirm({
	                    title: '确认操作',
	                    content: '<p>' + content + '</p>',
	                    onOk: () => {
	                    		var $this = this;
							if(status == 1) {
								$this.disable(data);
							} else {
								$this.enable(data);
							}
	                    },
	                    onCancel: () => {
	                    }
	                });
				} else if(type == 'edit-pwd') {//编辑密码
					$this.$Modal.confirm({
						title: '输入重置密码',
	                    render: (h) => {
	                    		return h('div', [
		                    			h('Input', {
			                            props: {
			                                value: $this.newPwd,
			                                autofocus: true,
			                                placeholder: '输入重置密码'
										},
										on: {
			                                input: (val) => {
			                                    $this.newPwd = val;
			                                }
			                            }
			                        })
		                    		]);
	                        return 
	                    },
						onOk: () => {
							
						}
	                })
				}
			},
			submit2Edit(form) {//编辑属性
				var $this = this;
				var data = form.data;
				form.isSubmit = true;
				// 编辑
				$accountService.edit({
					accid: data.accid,
					username: data.username,
					phoneNum: data.phoneNum,
					roleType: data.roleType,
					name: data.name
				})
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						if(form.actionType == 1) {
							$this.data.data.splice(0, 0, res.data);
						} else {
							$this.data.data[form.row.index].username = res.data.username;
							$this.data.data[form.row.index].phoneNum = res.data.phoneNum;
							$this.data.data[form.row.index].name = res.data.name;
							$this.data.data[form.row.index].roleType = res.data.roleType;
						}
						$this.$Message.success(res.msg);
						form.isSubmit = false;
						form.isShow = false;
					} else {
						form.isSubmit = false;
						$this.$Message.error(res.msg);
					}
				}, function(error) {
					form.isSubmit = false;
					$this.$Message.error('网络异常，请稍后再试');
				});
			},
			editPwd() {
				$accountService.editPwd(
					accid, $this.newPwd)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					var resmsg = res.msg;
					if(code == 100) {
						$this.$Message.success(resmsg);
					} else {
						$this.$Message.error(resmsg);
					}
				}, function(error) {
					$this.$Message.error('网络异常，请稍后再试！');
				});	
			},
			// 启用
			enable(data) {
				var $this = this;
				$accountService.enable(data.accid)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					var resmsg = res.msg;
					if(code == 100) {
						data.status = 1;
					} else {
						$this.$Message.error(resmsg);
					}
				}, function(error) {
					$this.$Message.error('网络异常，请稍后再试！');
				});
			},
			// 禁用
			disable(data) {
				var $this = this;
				$accountService.disable(data.accid)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					var resmsg = res.msg;
					if(code == 100) {
						data.status = 0;
					} else {
						$this.$Message.error(resmsg);
					}
				}, function(error) {
					$this.$Message.error('网络异常，请稍后再试！');
				});
			},
			getAccounts() {
				var $this = this;
				this.data.isLoading = true;
				$accountService.getAccounts(
					$this.searchData.condition,
					$this.searchData.filter,
					$this.data.page,
					$this.data.pagesize)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						$this.data.data = res.data;
						$this.data.totalsize = res.totalSize;
					}
					$this.data.isLoading = false;
				}, function(error) {
					$this.data.isLoading = false;
					$this.$Message.error('网络异常，请稍后再试！');
				});
			}
		},
		mounted: function() {
			this.getAccounts();
		}
	}
</script>

<style scoped="scoped">
	.search-view {
		margin-bottom: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	}
	
	.btns-view {
		margin-bottom: 10px;
	}
	
	.data-view {
	}
	
	.page-view {
		text-align: center;
		position: fixed;
		background-color: #fff;
		padding: 15px 0;
		z-index: 999;
		bottom: 0;
		left: 200px;
		right: 0px;
	}
</style>